<template>
	<view style="background: #F5F5F5;height:100%;margin:0 auto;padding-top:20px;">
		<view class="view1" style=""  v-for="(item,index) in topicLabel" :key="index" @click="htzy(item.topicId)">
			<div v-for="(ele,index) in item.url" :key="index">
				<img :src="ele" style="width:80px;height:80px;float:left;margin-top:20px;margin-left:10px"></img>
			</div>
			<div style="float:left" class="div_1" >
				<p style="font-weight:bold;margin-top:20px">#{{item.topicName}}</p>
				<p style="font-size: 15px;">锁骨以下</p>
				<p style="font-size: 13px;color:darkgray"><span>{{topicLabelbyidNum}}片话题</span> 
				<span>{{item.topicViews}}次浏览</span></p>
			</div>
			<button class="span_2" style="float:left"  >+关注</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: 'http://c.svner.cn/19.jpg',
				// 话题标签列表
				topicLabel: [],
				id:'',
				// 话题总数
				topicLabelbyidNum:[]
			}
		},
		onLoad(option) {
			this.getFollowUser()
			// 查询话题总数
			this.lablenum()
			this.id=option.id
			
		},
		mounted () {
			this.lablenum()
		},
		methods: {
			// 查询话题总数
			lableview (topicId) {
				this.$axios({
					url: '/contents/updetTopicLabel?id=' + 1,
					method: 'post',
					success: (res) => {
						if (res.data.code === 200) {
							this.topicLabelbyidNum = res.data.object
						}
					}
				})
			},
			// 查询话题总数
			lablenum (topicId) {
				this.$axios({
					url: '/contents/getTopicLabelByIdNum?id=' + 1,
					method: 'get',
					success: (res) => {
						if (res.data.code === 200) {
							this.topicLabelbyidNum = res.data.object
						}
					}
				})
			},
			htzy (topicId) {
				// 跳转话题主页
				uni.navigateTo({
					url: '../index/topicHome?id=' + topicId
				})
				// 浏览数
				this.$axios({
					url: '/contents/updetTopicLabel?id=' + topicId,
					method: 'PUT',
					success: (res) => {
						if (res.data.code === 200) {
							this.getFollowUser()
						}
					}
				})
			},
			// 查询话题标签列表
			getFollowUser(){
				this.$axios({
					url: '/contents/getTopicLabel',
					method: 'get',
					success: (res) => {
						if (res.data.code === 200) {
							debugger
							this.topicLabel = res.data.object
							alert(res.data.object)
						}
					}
				})
			},
		}
	}
</script>

<style>
	.view1{
		width:95%;
		height:120px;
		background:#FAFAFA;
		border-radius: 20px 20px 20px 20px;
		margin:0 auto;
	}
	.div_1 p {
		margin-top:8px;
		margin-left:10px;
	}
	.span_2{
		margin-left: 10%;
		margin-top:30px;
		height: 25px;
		width: 80px;
		border-radius: 20px 20px 20px;
		line-height: 180%;
		background-color: #3B3B3B;
		color: white;
		font-size: 13px;
	}
</style>
